<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/reveal.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <header></header>
    <div class="nav_main"></div>
    <div class="present-view">
        <div class="nav_left">
            <div id="accordion" class="panel-group" role="tablist">
                <div class="panel panel-default">
                    <p data-toggle="collapse" href="#reveal" data-parent="#accordion">平台运营数据</p>
                    <div id="reveal" class="panel-collapse collapse in">
                        <a href="present.html" class="active">公司介绍</a>
                        <a href="scale.html">平台规模</a>
                        <a href="management.html">风控措施</a>
                        <a href="legend.html">客户借款</a>
                        <a href="circulate.html" class="active">借还情况</a>
                    </div>
                </div>
                <div class="panel panel-default">
                    <p data-toggle="collapse" href="#msg" data-parent="#accordion">从业机构信息</p>
                    <div id="msg" class="panel-collapse collapse">
                        <a href="outfitmsg.html">基本信息</a>
                        <a href="speech.html">审计报告</a>
                        <a href="charge.html">收费标准</a>
                        <a href="archives.html">备案信息</a>
                        <a href="risk.html">风险管理信息</a>
                        <a href="contact.html">平台信息</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="circulate-content-view content-view">
            <h4 class="view-title">借还情况</h4>
            <h4 class="view-list">未偿还借款记录</h4>
            <img src="../images/notpay.png" alt="">
            <ul class="notpay">
                <li>
                    <p>信用借款</p>
                    <span>231458次</span>
                </li>
                <li>
                    <p>保证借款</p>
                    <span>215次</span>
                </li>
                <li>
                    <p>抵押借款</p>
                    <span>231458次</span>
                </li>
                <li>
                    <p>质押借款</p>
                    <span>231458次</span>
                </li>
            </ul>
            <div class="view-list-border"></div>
            <h4 class="view-list">逾期记录</h4>
            <img src="../images/overdue.png" alt="">
            <ul class="notpay overdue">
                <li>
                    <span>0</span>
                    <p>逾期1-30天</p>
                </li>
                <li>
                    <span>0</span>
                    <p>逾期31-90天</p>
                </li>
                <li>
                    <span>0</span>
                    <p>逾期90天以上</p>
                </li>
            </ul>
            <p class="overdue-tips">平台撮合交易的未偿还借款中,本金部分全部或部分逾期1天及以上的借款(本金)情况 </p>
            <h4 class="view-list">平台出借回报情况</h4>
            <div id="repay" style="width: 885px;height: 310px"></div>
            <h4 class="view-list">平台代偿情况</h4>
            <table class="table compensatory text-center">
                <tbody>
                    <tr>
                        <td></td>
                        <td>
                            <span></span>
                            上年同期数
                        </td>
                        <td>
                            <span></span>
                            本期增加
                        </td>
                        <td>
                            <span></span>
                            本期追回
                        </td>
                        <td>
                            <span></span>
                            期末数
                        </td>
                    </tr>
                    <tr>
                        <td>累计代偿金额</td>
                        <td>24期</td>
                        <td>24期</td>
                        <td>24期</td>
                        <td>24期</td>
                    </tr>
                    <tr>
                        <td>累计代偿笔数</td>
                        <td>24期</td>
                        <td>24期</td>
                        <td>24期</td>
                        <td>24期</td>
                    </tr>
                </tbody>
            </table>
            <h4 class="view-title">满标时间</h4>
            <div id="time" style="width:885px;height:440px"></div>
            <table class="table time text-center table-striped table-bordered">
                <tbody>
                    <tr>
                        <td rowspan="4" style="width:162px;padding:0 20px">平均满标用时(天） (当月撮合成交项目募集时长总和/对应项目笔数）
                        </td>
                        <td>上年同期数</td>
                        <td>期间新增</td>
                        <td>期间减少</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
    <script>
        var repay = echarts.init(document.getElementById("repay"));
        var time = echarts.init(document.getElementById("time"));
        var repay_option = {
            // title: {
            //     text: "担保方式分布情况",
            //     left: "19%",
            //     top: "60%"
            // },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                top: "25%",
                right: "20%"
            },
            series: {
                type: 'pie',
                // radius: '55%',
                center: ['25%', '50%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: 21, name: "逾期金额" },
                    { value: 13, name: "逾期金额对应借款笔数" },
                    { value: 13, name: "逾期率" },
                    { value: 9, name: "累计逾期率" },
                    { value: 18, name: "不良率" },
                    { value: 13, name: "累计不良率" }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        }
        var time_option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + "<br>" + params.value + "元 - " + params.data.name
                }
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['2017-12', '2018-01', '2018-02', '2018-03']
            },
            series: [
                {
                    type: 'bar',
                    data: [
                        { value: 1000, name: "30天" },
                        { value: 3000, name: "28天" },
                        { value: 5000, name: "7天" },
                        { value: 1000, name: "14天" }
                    ],
                    barMaxWidth: "28",
                }
            ]
        }
        repay.setOption(repay_option)
        time.setOption(time_option)
    </script>
</body>

</html>